<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div style="text-align: center; margin-top: 3rem;">
            <van-image
            round
            width="6rem"
            height="6rem"
            fit="cover"
            src="https://unpkg.com/@vant/assets/cat.jpeg"
            />            
        </div>

        <div style="margin: 2rem 4rem; line-height: 3rem; ">
            <div v-if="userInfo.username" style="text-align: center;"> 
                <span>欢迎您! {{ userInfo.username }}</span>
                <br>
                <van-button type="warning" size="mini" @click="loginOut">退出登录</van-button>
            </div>
            <div v-else style="text-align: center;">
                <van-button type="warning" size="mini" @click="() =>router.push({path: '/m/login'})">立即登录</van-button>
                <van-button type="warning" size="mini" @click="() =>router.push({path: '/m/register'})">注册账号</van-button>
            </div>
            <div @click="forOrders">
                <van-cell style="font-size: 1rem;" icon="orders-o" title="全部订单" is-link/>
            </div>
            <div @click="forInformation">
                <van-cell icon="manager-o" title="收件信息" is-link />
            </div>
        </div>
        <BtyTabBar/>
    </div>
</template>


<script setup>
import {ref, reactive} from 'vue';
import { useRouter } from 'vue-router';
import BtyTabBar from '@/components/BtyTabBar.vue';
import { getUserInfo } from '@/requests/index';
const router = useRouter();

const userInfo = reactive({
  "username": "",
  "is_superuser": null,
  "id": null
});
const forUserInfo = async () => {
  if (window.localStorage.getItem("token")) {
    const res = await getUserInfo();
    if (res.status === 2000) {
      const data = res.data;
      userInfo.username = data.username;
      userInfo.is_superuser = data.is_superuser;
      userInfo.id = data.id;
    } else {
      console.log("用户未登录")
    }
  }
};
forUserInfo();

// 退出登录
const loginOut = () => {
  window.localStorage.removeItem("token");
  window.localStorage.removeItem("username");
  router.push({ path: '/' });
}
// 全部订单
const forOrders = ()=>{
    if (window.localStorage.getItem('token')){
        router.push({path: '/m/order'})
    }else{
        router.push({path: '/m/login'})
    }
}
// 个人信息
const forInformation =()=>{
    if (window.localStorage.getItem('token')){
        router.push({path: '/m/information'})
    }else{
        router.push({path: '/m/login'})
    }
}
</script>